import React, { Component } from "react";
import "../css/underway.css";
import eventEmitter from "../events";
class Underway extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: localStorage.getItem('list') || [],
      flag: false,
    };
  }
  componentDidMount() {
    eventEmitter.addListener("submissions", (list) => {
      this.state.list.push(list);
      localStorage.setItem('list', JSON.stringify(this.state.list))
      this.setState({
        list: this.state.list,
      });
    });
    eventEmitter.addListener("Underway", (list) => {
      this.state.list.push(list);
      localStorage.setItem('list', JSON.stringify(this.state.list))
      this.setState({
        list: this.state.list,
      });
    });
  }
  render() {
    return (
      <div className="content_headUnderway">
        <div className="Underway">
          <h1>正在进行</h1>
          <span>1</span>
        </div>
        <div className="list_underway">
          <div className="content">
            <ul>
              {this.state.list.map((el, index) => {
                return (
                  <li key={index}>
                    <p>
                      <input
                        type="checkbox"
                        defaultChecked={el.flag}
                        onChange={() => {
                          el.flag = 1;
                          let obj=el;
                          eventEmitter.emit("Done",obj)
                          this.state.list.splice(index,1)
      localStorage.setItem('list', JSON.stringify(this.state.list))

                          this.setState({
                            list:this.state.list
                        })
                        }}
                      />
                      {el.value}
                    </p>
                    <button
                      onClick={() => {
                        this.state.list.splice(index, 1);
                        localStorage.setItem('list', JSON.stringify(this.state.list))

                        this.setState({
                          list: this.state.list,
                        });
                      }}
                    >
                      -
                    </button>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

export default Underway;
